<template><!---->
  <div id="test">
    <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
    <table-body :options="initObj"></table-body>
  </div>
</template>
<script>
import { hwTeamRankStatis, hwDefenseTeamRankStatis } from '@/api/compitionStatic'
import { getTopoTargetList_old } from '@/api/drill_compete'
import tableBody from './tableListComponent'
import groupMixin from "@/mixin/groupMixin";
export default {
  name: 'hwTeamRankStatic',
  props:['sceneId', 'poll', 'isDefend', 'targetScore'],
  mixins: [groupMixin],
  data(){
    const d = function(val){
      this.getRankingStatic(null,null,val)
    }.bind(this);
    return {
      initObj:{
          Button:[
          ],
          Input:[
          ],
          Select:[
              {
                  optionsValue: [],
                  placeholder: `请选择${this.isDefend ? '目标' : '团队'}`,
                  fnName: this.getRankingStaticById
              }
          ],
          DatePicker:{
            isShow:false,
            fnName:d,
          },
          Page:{
            total:0,
            currentPage:1,
            pageSize:10
          },
          Table:{
            listCol:[
              {
                title:"排行",
                align: 'center',
                key:'rank',
                placement:'top-right',
                order:2,
                render:(h,params) => {
                let ele;
                if(params.row._index < 3 && this.curPage == 1){
                  ele = h('img',{
                    attrs:{
                      src:require(`../../../../assets/scene/top${params.row._index+1}.png`)
                    },
                    style:{
                      display:'inline-block',
                      verticalAlign: 'text-bottom',
                      marginLeft: '20px'
                    }
                  })
                }else{
                  ele = h('span',params.row._index+1 + (this.curPage-1)*10)
                }
                let index = params.row._index+1;
                let color;
                if(index == 1){
                  color = '#f34938';
                }else if(index == 2){
                  color = '#eb8205';
                }else if(index == 3){
                  color = '#27b666';
                }else{
                  color = '#000'
                }
                return h('span',[
                  h('span',{
                    style:{
                      color:color
                    }
                  },'排行'),
                  ele
                ]);
              }
              },
              {
                title:`${this.isDefend ? '目标' : '团队'}名称`,
                key: `${this.isDefend ? 'targetName' : 'teamName'}`,
                align:'center',
                ellipsis:true,
                tooltip:true,
                placement:'top-left',
                order:1,
                  width: 240
              },
              {
                title:'总分',
                key:'totalScore',
                align:'center',
                ellipsis:true,
                tooltip:true,
                width:100,
              },
              {
                title:'审核通过次数',
                key:'totalCount',
                align:'center',
                ellipsis:true,
                width:100,
              },
            ],
            listData:[]
          },
          Fnlist:'getRankingStatic',
      },
      selName:'',
      timeout:{},
      curPage:1
    }
  },
  components:{
    'table-body':tableBody,
  },
  watch:{
    teamList(newValue) {
      if (this.isDefend) {
        return
      }
      this.initObj.Select[0].optionsValue = newValue.filter(item => item.name !== '目标方管理员组')
    }
  },
  beforeDestroy () {
    this.timeout = null
    clearInterval(this.timeout)
  },
  mounted(){
    this.getRankingStatic();
    if (this.isDefend) {
      this.getTopoTargetList() // 防守方页面需要获取目标列表
      this.initObj.Table.listCol.push({
        title:'基础分',
        key:'targetScore',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'防守得分',
        key:'defendScore',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'被攻击扣分',
        key:'attackScore',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'加减分',
        key:'exceptScore',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      })
    } else {
      this.initObj.Table.listCol.push({
        title:'高危数量',
        key:'highCount',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'中危数量',
        key:'middleCount',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'低危数量',
        key:'lowCount',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      },{
        title:'加减分',
        key:'exceptScore',
        align:'center',
        ellipsis:true,
        tooltip:true,
        width:100,
      })
    }
  },
  methods:{
    // 获取目标列表
    getTopoTargetList() {
      getTopoTargetList_old({
        pageIndex: 1,
        pageSize: 2147483646,
        projectId: this.$route.query.prjid
      }).then(({ code, message, data = {} }) => {
        if (code !== 1) {
          this.$Message.warning(message)
        } else {
          this.targetList = (data.items || []).map(item => {
            item.name = item.company
            return item
          })
          this.initObj.Select[0].optionsValue = this.targetList
        }
      }).catch(() => {
        this.$Message.error('获取目标列表异常')
      })
    },
    getRankingStaticById(id) {
        this.selName = this.isDefend ? this.getTargetName(id) : this.getTeamNameById(id)
        this.getRankingStatic();
    },
    getTargetName(id) {
      return (this.targetList.find(item => item.id === id) || {}).name
    },
    getRankingStatic(page,pageSize,querytime){
      let _this = this;
      let pages = page || 1;
      this.$set(this.initObj.Page, 'currentPage', pages)
      let rows = pageSize||_this.PZ|| 10;
      let id = '';
      let params={
        pageIndex : pages,
        pageSize : rows
      };
      this.curPage = pages;
      if(this.selName){
        this.isDefend ? params.targetName = this.selName : params.teamName = this.selName;
      }
      if(_this.$route.query.id){
        let api = this.isDefend ? hwDefenseTeamRankStatis : hwTeamRankStatis
        api(this.$route.query.id,params).then(data=>{
          if(data.code==1){
            _this.initObj.Table.listData = this.isDefend ? data.data.items.map(item => {
              item.targetScore = this.targetScore
              return item
            }) : data.data.items;
            _this.initObj.Page.total = data.data.total;
            if(this.poll){ //如果需要轮询
             this.timeout && clearInterval(this.timeout)
              this.timeout = setInterval(() => {
                this.getRankingStatic(page,pageSize);
              },3000)
            }
          }
        })
      }
    },
  }
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    padding: 10px;
    margin-bottom: 10px;
  }
</style>
